<template>
  <div class="modify-info-dialog-overlay" v-if="visible" @click.self="handleClose">
    <div class="modify-info-dialog">
      <div class="modify-info-dialog-header" @mousedown="startDrag" :style="{ cursor: isDragging ? 'grabbing' : 'grab' }">
        <h3>修改信息 | {{ chatId }}</h3>
        <button class="close-button" @click="handleClose" @mousedown.stop>&times;</button>
      </div>
      
      <!-- 提示信息 -->
      <div v-if="showManagerAlert" class="manager-alert">
        <div class="alert-content">
          <span class="alert-icon">⚠️</span>
          <span class="alert-text">请指定客户负责人</span>
        </div>
      </div>
      
      <!-- Tab 导航 -->
      <div class="tab-navigation">
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'chat' }" 
          @click="activeTab = 'chat'">
          聊天跟进
        </button>
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'customer' }" 
          @click="activeTab = 'customer'">
          客户信息
        </button>
      </div>
      
      <div class="modify-info-dialog-container">
        <!-- 聊天跟进 Tab 内容 -->
        <div v-if="activeTab === 'chat'" class="tab-content">
          <!-- 左侧表单部分 -->
          <div class="modify-info-dialog-left">
            <form class="kiki-form" @submit.prevent="handleSave">
              <input type="hidden" name="chatId" :value="chatId">
              <div class="kiki-form-item">
                <label class="kiki-form-label">昵称</label>
                <input type="text" class="kiki-input" v-model="formData.nickname" placeholder="请输入昵称">
              </div>
              <div class="kiki-form-item">
                <label class="kiki-form-label">订单编号</label>
                <input type="text" class="kiki-input" v-model="formData.order_no" placeholder="请输入订单编号">
              </div>
              <div class="kiki-form-item">
                <label class="kiki-form-label">客户负责人</label>
                <select class="kiki-input" v-model="formData.sales_manager_id">
                  <option :value="null">未指定</option>
                  <option v-for="staff in staffList" :key="staff.id" :value="staff.id">
                    {{ staff.last_name }}{{ staff.first_name }}
                  </option>
                </select>
              </div>
              <div class="kiki-form-item">
                <label class="kiki-form-label">跟进状态</label>
                <select class="kiki-input" v-model="formData.follow_status" required>
                  <option v-for="status in statusList" :key="status.value" :value="status.value">
                    {{ status.label }}
                  </option>
                </select>
              </div>
              <div class="kiki-form-item">
                <label class="kiki-form-label">添加对话跟进提醒</label>
                <div class="kiki-switch">
                  <input type="checkbox" id="needFollow" v-model="formData.need_follow">
                  <label for="needFollow"></label>
                </div>
              </div>
              <div class="kiki-form-item follow-datetime" v-show="formData.need_follow">
                <div class="datetime-container">
                  <div class="date-input">
                    <label class="kiki-form-label">提醒日期</label>
                    <input type="date" class="kiki-input" v-model="formData.follow_date">
                  </div>
                  <div class="time-input">
                    <label class="kiki-form-label">提醒时间</label>
                    <input type="time" class="kiki-input" v-model="formData.follow_time">
                  </div>
                </div>
              </div>
              <div class="kiki-form-item">
                <label class="kiki-form-label">对话提醒内容</label>
                <textarea class="kiki-input" v-model="formData.note" placeholder="请输入跟进备注" rows="3"></textarea>
              </div>
              
              <!-- 添加保存按钮 -->
              <div class="kiki-form-item save-button-container">
                <button type="submit" class="kiki-save-btn">保存修改</button>
              </div>
            </form>
          </div>
        </div>

        <!-- 客户信息 Tab 内容 -->
        <div v-if="activeTab === 'customer'" class="tab-content">
          <div class="customer-form-container">
            <form class="kiki-form" @submit.prevent="handleSaveCustomer">
              <div class="customer-form-grid">
                <div class="kiki-form-item">
                  <label class="kiki-form-label">客户姓名 *</label>
                  <input type="text" class="kiki-input" v-model="customerData.name" placeholder="请输入客户姓名" required>
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">公司名称</label>
                  <input type="text" class="kiki-input" v-model="customerData.company" placeholder="请输入公司名称">
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">公司域名</label>
                  <input type="text" class="kiki-input" v-model="customerData.domain" placeholder="请输入公司域名">
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">邮箱</label>
                  <input type="email" class="kiki-input" v-model="customerData.mail" placeholder="请输入邮箱">
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">电话</label>
                  <input type="text" class="kiki-input" v-model="customerData.phone" placeholder="请输入电话" readonly>
                  <small class="field-note">从WhatsApp号码自动填入</small>
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">WhatsApp</label>
                  <input type="text" class="kiki-input" v-model="customerData.whatsapp" 
                         @input="handleWhatsAppChange" placeholder="请输入WhatsApp号码">
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">国家</label>
                  <select class="kiki-input" v-model="customerData.country">
                    <option value="">请选择国家</option>
                    <option v-for="country in countryList" :key="country.code" :value="country.code">
                      {{ country.name }} ({{ country.code }})
                    </option>
                  </select>
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">客户来源</label>
                  <select class="kiki-input" v-model="customerData.source">
                    <option value="">请选择</option>
                    <option v-for="source in sourceList" :key="source.value" :value="source.value">
                      {{ source.label }}
                    </option>
                  </select>
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">客户标签</label>
                  <input type="text" class="kiki-input" v-model="customerData.tag" placeholder="请输入客户标签">
                </div>
                <div class="kiki-form-item">
                  <label class="kiki-form-label">客户类型</label>
                  <select class="kiki-input" v-model="customerData.crmcustomercategory_id">
                    <option :value="null">请选择</option>
                    <option v-for="category in categoryList" :key="category.id" :value="category.id">
                      {{ category.name }}
                    </option>
                  </select>
                </div>
                <div class="kiki-form-item full-width">
                  <label class="kiki-form-label">客户地址</label>
                  <textarea class="kiki-input" v-model="customerData.address" placeholder="请输入客户地址" rows="3"></textarea>
                </div>
              </div>
              
              <!-- 保存按钮 -->
              <div class="kiki-form-item save-button-container">
                <button type="submit" class="kiki-save-btn">
                  {{ isNewCustomer ? '创建客户信息' : '更新客户信息' }}
                </button>
                <!-- 解除绑定按钮 - 只在已有客户时显示 -->
                <button v-if="!isNewCustomer" type="button" class="kiki-unbind-btn" @click="handleUnbindCustomer">
                  去掉绑定
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 右侧订单信息部分 -->
        <div class="modify-info-dialog-right">
          <!-- 群组成员信息 -->
          <div v-if="isGroup && groupMembers.length > 0" class="group-members-section">
            <h3>群组成员 ({{ groupMembers.length }})</h3>
            <div class="group-members-list">
              <div v-for="member in groupMembers" :key="member.serialized" class="group-member-item">
                <div class="member-info">
                  <div class="member-name">{{ member.name }}</div>
                  <div class="member-serialized" :title="member.serialized">{{ member.serialized }}</div>
                </div>
                <button class="copy-btn" @click="copyToClipboard(member.serialized)" title="复制序列号">
                  📋
                </button>
              </div>
            </div>
          </div>
          
          <h3>订单信息</h3>
          <!-- 订单信息内容 -->
          <div v-if="orderInfo.order_no" class="order-info">
            <div class="order-info-item">
              <strong>订单编号：</strong>
              <a :href="`${URL_CONFIG.ERP_BASE_URL}/#/crm/crmorder?kw=${orderInfo.order_no}`" 
                 target="_blank" class="order-link">
                {{ orderInfo.order_no }}
              </a>
            </div>
            <div v-if="orderInfo.name" class="order-info-item">
              <strong>订单名称：</strong>
              <span>{{ orderInfo.name }}</span>
            </div>
            <div v-if="orderInfo.status" class="order-info-item">
              <strong>订单状态：</strong>
              <span>{{ orderInfo.status }}</span>
            </div>
            <div v-if="orderInfo.remark" class="order-info-item">
              <strong>订单备注:</strong>
              <span>{{ orderInfo.remark }}</span>
            </div>
            <div v-if="orderInfo.created_at" class="order-info-item">
              <strong>创建时间：</strong>
              <span>{{ new Date(orderInfo.created_at).toLocaleString() }}</span>
            </div>
          </div>
          <div v-else class="no-order-info">
            暂无相关订单信息
          </div>

          <h3>备注记录</h3>
          <div class="remarks-container">
            <div v-if="remarks.length > 0">
              <div v-for="(remark, index) in remarks" :key="index" class="remark-item">
                <div class="remark-creator">
                  <strong>{{ remark.creator_name || '未知用户' }}</strong>
                  <span v-if="remark.is_alert" class="alert-tag">[提醒]</span>
                </div>
                <div class="remark-content">{{ remark.content }}</div>
                <div class="remark-time">创建时间: {{ remark.create_at || '无' }}</div>
                <div v-if="remark.is_alert" class="remark-follow-time">
                  下次跟进时间: {{ remark.next_follow_up_time || '无' }}
                </div>
              </div>
            </div>
            <div v-else class="no-remarks">
              暂无备注
            </div>
          </div>
          
          <!-- 备注表单 -->
          <div v-if="crmcustomer_id" class="kiki-remark-form">
            <h4>添加新备注</h4>
            <div class="kiki-form-item">
              <label class="kiki-form-label">备注内容</label>
              <textarea class="kiki-input" v-model="remarkForm.content" placeholder="请输入备注内容" rows="3"></textarea>
            </div>
            <div class="kiki-form-item">
              <label class="kiki-form-label">需要提醒？</label>
              <div class="kiki-switch">
                <input type="checkbox" id="isRemarkAlert" v-model="remarkForm.is_alert">
                <label for="isRemarkAlert"></label>
              </div>
            </div>
            <div class="kiki-form-item" v-show="remarkForm.is_alert">
              <label class="kiki-form-label">下次跟进时间 (选填)</label>
              <input type="datetime-local" class="kiki-input" v-model="remarkForm.next_follow_up_time">
            </div>
            <div class="save-remark-button-container">
              <button type="button" class="kiki-save-remark-btn" @click="handleSaveRemark">保存备注</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, PropType, watch } from 'vue';
import { getFollowStatus, getChatOrderData, getLastSelectedManager, saveLastSelectedManager, getAuthInfo, getStoredAccountID } from '../utils/whatsappApi';
import { createCustomer, updateCustomer, unbindCustomer, getCustomerCategories } from '../utils/erpapi';
import { isGroupChat, getGroupMembers, getCurrentChatId } from '../utils/whatsappHandler';
import { STORAGE_KEYS, URL_CONFIG } from '../utils/defines';

interface StatusItem {
  label: string;
  value: string;
}

interface StaffItem {
  id: number;
  last_name: string;
  first_name: string;
}

interface RemarkItem {
  creator_name: string;
  content: string;
  create_at: string;
  is_alert: boolean;
  next_follow_up_time?: string;
}

interface OrderInfo {
  order_no: string;
  name: string;
  status: string;
  remark: string;
  created_at: string;
}

interface CustomerData {
  name: string;
  company: string;
  domain: string;
  mail: string;
  phone: string;
  whatsapp: string;
  country: string;
  source: string;
  tag: string;
  address: string;
  crmcustomercategory_id: number | null;
}

interface CountryItem {
  code: string;
  name: string;
  phoneCode: string;
}

interface SourceItem {
  value: string;
  label: string;
}

interface CategoryItem {
  id: number;
  name: string;
}

interface GroupMember {
  serialized: string;
  name: string;
}

export default defineComponent({
  name: 'ModifyInfoDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    chatId: {
      type: String,
      required: true
    }
  },
  emits: ['close', 'saved'],
  setup(props, { emit }) {
    // 当前活跃的tab
    const activeTab = ref<'chat' | 'customer'>('chat');
    
    // 是否显示客户负责人提醒
    const showManagerAlert = ref<boolean>(false);
    
    // 群组相关数据
    const isGroup = ref<boolean>(false);
    const groupMembers = ref<GroupMember[]>([]);
    
    // 拖拽相关数据
    const isDragging = ref<boolean>(false);
    const dragOffset = ref<{ x: number; y: number }>({ x: 0, y: 0 });
    
    // 状态列表
    const statusList = ref<StatusItem[]>([]);
    // 员工列表
    const staffList = ref<StaffItem[]>([]);
    // 备注列表
    const remarks = ref<RemarkItem[]>([]);
    // 订单信息
    const orderInfo = ref<OrderInfo>({
      order_no: '',
      name: '',
      status: '',
      remark: '',
      created_at: ''
    });
    // CRM客户ID
    const crmcustomer_id = ref<number | null>(null);
    // 是否为新客户
    const isNewCustomer = ref<boolean>(true);
    // 客户数据
    const customerData = reactive<CustomerData>({
      name: '',
      company: '',
      domain: '',
      mail: '',
      phone: '',
      whatsapp: '',
      country: '',
      source: '',
      tag: '',
      address: '',
      crmcustomercategory_id: null
    });
    
    // 国家列表
    const countryList = ref<CountryItem[]>([
      { code: 'CN', name: '中国', phoneCode: '+86' },
      { code: 'US', name: '美国', phoneCode: '+1' },
      { code: 'UK', name: '英国', phoneCode: '+44' },
      { code: 'CA', name: '加拿大', phoneCode: '+1' },
      { code: 'AU', name: '澳大利亚', phoneCode: '+61' },
      { code: 'DE', name: '德国', phoneCode: '+49' },
      { code: 'FR', name: '法国', phoneCode: '+33' },
      { code: 'JP', name: '日本', phoneCode: '+81' },
      { code: 'KR', name: '韩国', phoneCode: '+82' },
      { code: 'IN', name: '印度', phoneCode: '+91' },
      { code: 'SG', name: '新加坡', phoneCode: '+65' },
      { code: 'MY', name: '马来西亚', phoneCode: '+60' },
      { code: 'TH', name: '泰国', phoneCode: '+66' },
      { code: 'VN', name: '越南', phoneCode: '+84' },
      { code: 'PH', name: '菲律宾', phoneCode: '+63' },
      { code: 'ID', name: '印度尼西亚', phoneCode: '+62' },
      { code: 'BR', name: '巴西', phoneCode: '+55' },
      { code: 'MX', name: '墨西哥', phoneCode: '+52' },
      { code: 'AR', name: '阿根廷', phoneCode: '+54' },
      { code: 'CL', name: '智利', phoneCode: '+56' },
      { code: 'CO', name: '哥伦比亚', phoneCode: '+57' },
      { code: 'PE', name: '秘鲁', phoneCode: '+51' },
      { code: 'ZA', name: '南非', phoneCode: '+27' },
      { code: 'EG', name: '埃及', phoneCode: '+20' },
      { code: 'NG', name: '尼日利亚', phoneCode: '+234' },
      { code: 'KE', name: '肯尼亚', phoneCode: '+254' },
      { code: 'MA', name: '摩洛哥', phoneCode: '+212' },
      { code: 'TN', name: '突尼斯', phoneCode: '+216' },
      { code: 'RU', name: '俄罗斯', phoneCode: '+7' },
      { code: 'TR', name: '土耳其', phoneCode: '+90' },
      { code: 'SA', name: '沙特阿拉伯', phoneCode: '+966' },
      { code: 'AE', name: '阿联酋', phoneCode: '+971' },
      { code: 'QA', name: '卡塔尔', phoneCode: '+974' },
      { code: 'KW', name: '科威特', phoneCode: '+965' },
      { code: 'OM', name: '阿曼', phoneCode: '+968' },
      { code: 'BH', name: '巴林', phoneCode: '+973' },
      { code: 'JO', name: '约旦', phoneCode: '+962' },
      { code: 'LB', name: '黎巴嫩', phoneCode: '+961' },
      { code: 'IL', name: '以色列', phoneCode: '+972' },
      { code: 'IT', name: '意大利', phoneCode: '+39' },
      { code: 'ES', name: '西班牙', phoneCode: '+34' },
      { code: 'PT', name: '葡萄牙', phoneCode: '+351' },
      { code: 'NL', name: '荷兰', phoneCode: '+31' },
      { code: 'BE', name: '比利时', phoneCode: '+32' },
      { code: 'CH', name: '瑞士', phoneCode: '+41' },
      { code: 'AT', name: '奥地利', phoneCode: '+43' },
      { code: 'SE', name: '瑞典', phoneCode: '+46' },
      { code: 'NO', name: '挪威', phoneCode: '+47' },
      { code: 'DK', name: '丹麦', phoneCode: '+45' },
      { code: 'FI', name: '芬兰', phoneCode: '+358' },
      { code: 'PL', name: '波兰', phoneCode: '+48' },
      { code: 'CZ', name: '捷克', phoneCode: '+420' },
      { code: 'HU', name: '匈牙利', phoneCode: '+36' },
      { code: 'RO', name: '罗马尼亚', phoneCode: '+40' },
      { code: 'BG', name: '保加利亚', phoneCode: '+359' },
      { code: 'GR', name: '希腊', phoneCode: '+30' },
      { code: 'IE', name: '爱尔兰', phoneCode: '+353' },
      { code: 'LU', name: '卢森堡', phoneCode: '+352' },
      { code: 'MT', name: '马耳他', phoneCode: '+356' },
      { code: 'CY', name: '塞浦路斯', phoneCode: '+357' },
      { code: 'HR', name: '克罗地亚', phoneCode: '+385' },
      { code: 'SI', name: '斯洛文尼亚', phoneCode: '+386' },
      { code: 'SK', name: '斯洛伐克', phoneCode: '+421' },
      { code: 'EE', name: '爱沙尼亚', phoneCode: '+372' },
      { code: 'LV', name: '拉脱维亚', phoneCode: '+371' },
      { code: 'LT', name: '立陶宛', phoneCode: '+370' }
    ]);
    
    // 客户来源列表
    const sourceList = ref<SourceItem[]>([
      { value: '独立站', label: '独立站' },
      { value: '阿里巴巴', label: '阿里巴巴' },
      { value: '邮件营销', label: '邮件营销' },
      { value: 'WhatsApp', label: 'WhatsApp' },
      { value: 'Facebook', label: 'Facebook' },
      { value: 'Instagram', label: 'Instagram' },
      { value: 'LinkedIn', label: 'LinkedIn' },
      { value: 'Google广告', label: 'Google广告' },
      { value: '展会', label: '展会' },
      { value: '推荐', label: '推荐' },
      { value: '电话开发', label: '电话开发' },
      { value: '其他平台', label: '其他平台' },
      { value: '其他渠道', label: '其他渠道' }
    ]);
    
    // 客户分类列表
    const categoryList = ref<CategoryItem[]>([]);
    
    // 表单数据
    const formData = reactive({
      nickname: '',
      order_no: '',
      sales_manager_id: null as number | null, // 默认值改为null，表示未指定
      follow_status: '',
      need_follow: false,
      follow_date: new Date().toISOString().split('T')[0],
      follow_time: new Date().toTimeString().slice(0, 5),
      note: ''
    });
    
    // 备注表单数据
    const remarkForm = reactive({
      content: '',
      is_alert: false,
      next_follow_up_time: ''
    });
    
    // 显示 Toast 提示
    const showToast = (message: string, duration = 2000) => {
      const toast = document.createElement('div');
      toast.className = 'kiki-toast';
      toast.textContent = message;
      toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
        z-index: 10000;
      `;
      document.body.appendChild(toast);
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          document.body.removeChild(toast);
        }, 300);
      }, duration);
    };
    
    // 从电话号码推断国家代码
    const getCountryFromPhone = (phone: string): string => {
      const cleanPhone = phone.replace(/[^\d+]/g, '');
      
      // 移除开头的+号
      const phoneWithoutPlus = cleanPhone.startsWith('+') ? cleanPhone.substring(1) : cleanPhone;
      
      // 根据电话号码前缀推断国家
      const phoneCodeMap: { [key: string]: string } = {
        '86': 'CN',
        '1': 'US', // 美国和加拿大都是+1，默认设为美国
        '44': 'UK',
        '61': 'AU',
        '49': 'DE',
        '33': 'FR',
        '81': 'JP',
        '82': 'KR',
        '91': 'IN',
        '65': 'SG',
        '60': 'MY',
        '66': 'TH',
        '84': 'VN',
        '63': 'PH',
        '62': 'ID',
        '55': 'BR',
        '52': 'MX',
        '54': 'AR',
        '56': 'CL',
        '57': 'CO',
        '51': 'PE',
        '27': 'ZA',
        '20': 'EG',
        '234': 'NG',
        '254': 'KE',
        '212': 'MA',
        '216': 'TN',
        '7': 'RU',
        '90': 'TR',
        '966': 'SA',
        '971': 'AE',
        '974': 'QA',
        '965': 'KW',
        '968': 'OM',
        '973': 'BH',
        '962': 'JO',
        '961': 'LB',
        '972': 'IL',
        '39': 'IT',
        '34': 'ES',
        '351': 'PT',
        '31': 'NL',
        '32': 'BE',
        '41': 'CH',
        '43': 'AT',
        '46': 'SE',
        '47': 'NO',
        '45': 'DK',
        '358': 'FI',
        '48': 'PL',
        '420': 'CZ',
        '36': 'HU',
        '40': 'RO',
        '359': 'BG',
        '30': 'GR',
        '353': 'IE',
        '352': 'LU',
        '356': 'MT',
        '357': 'CY',
        '385': 'HR',
        '386': 'SI',
        '421': 'SK',
        '372': 'EE',
        '371': 'LV',
        '370': 'LT'
      };
      
      // 先尝试3位数的国家代码
      for (let i = 3; i >= 1; i--) {
        const prefix = phoneWithoutPlus.substring(0, i);
        if (phoneCodeMap[prefix]) {
          return phoneCodeMap[prefix];
        }
      }
      
      return '';
    };
    
    // 处理WhatsApp号码变化
    const handleWhatsAppChange = (event: Event) => {
      const target = event.target as HTMLInputElement;
      const whatsappNumber = target.value;
      
      // 自动填入电话号码
      customerData.phone = whatsappNumber;
      
      // 自动推断国家
      if (whatsappNumber) {
        const inferredCountry = getCountryFromPhone(whatsappNumber);
        if (inferredCountry && !customerData.country) {
          customerData.country = inferredCountry;
        }
      }
    };
    
    // 初始化数据
    const initData = async () => {
      try {
        // 验证当前聊天ID是否与props.chatId一致
        const currentChatId = getCurrentChatId();
        if (currentChatId !== props.chatId) {
          console.log('聊天ID不一致，跳过初始化。props:', props.chatId, '当前:', currentChatId);
          return;
        }
        
        // 如果客户分类列表为空，则加载
        if (categoryList.value.length === 0) {
          await loadCustomerCategories();
        }
        
        // 获取状态列表 - 从存储中获取，而不是重新请求API
        const storedStatusList = await new Promise<StatusItem[]>((resolve) => {
          chrome.storage.local.get([STORAGE_KEYS.FOLLOW_STATUS], (result) => {
            resolve(result[STORAGE_KEYS.FOLLOW_STATUS] || []);
          });
        });
        
        if (storedStatusList && storedStatusList.length > 0) {
          statusList.value = storedStatusList;
        } else {
          // 如果存储中没有，才从API获取
          const statusData = await getFollowStatus();
          if (statusData && statusData.data && Array.isArray(statusData.data)) {
            statusList.value = statusData.data;
          }
        }
        
        // 初始化销售经理ID为null
        formData.sales_manager_id = null;
        
        // 检查是否为群组聊天并获取成员信息
        if (props.chatId) {
          isGroup.value = isGroupChat(props.chatId);
          if (isGroup.value) {
            groupMembers.value = getGroupMembers(props.chatId);
            console.log('群组成员信息:', groupMembers.value);
          }
        }
        
        // 获取聊天数据
        if (props.chatId) {
          const chatData = await getChatOrderData(props.chatId);
          
          // 数据返回后再次验证聊天ID是否一致
          const currentChatIdAfterData = getCurrentChatId();
          if (currentChatIdAfterData !== props.chatId) {
            console.log('获取数据后聊天ID已变化，取消更新界面。props:', props.chatId, '当前:', currentChatIdAfterData);
            return;
          }
          
          if (chatData) {
            // 更新表单数据
            formData.nickname = chatData.nickname || '';
            formData.order_no = chatData.order_no || '';
            formData.sales_manager_id = chatData.sales_manager_id || null;
            formData.follow_status = chatData.follow_status || '';
            formData.need_follow = chatData.need_follow || false;
            formData.note = chatData.note || '';
            
            // 检查是否需要提示指定客户负责人
            if (chatData.project_id === 14 && !chatData.sales_manager_id) {
              showManagerAlert.value = true;
              // 自动切换到聊天跟进tab
              activeTab.value = 'chat';
            } else {
              showManagerAlert.value = false;
            }
            
            // 设置提醒时间
            if (chatData.follow_alert_at) {
              const [date, time] = chatData.follow_alert_at.split(' ');
              formData.follow_date = date;
              formData.follow_time = time.substring(0, 5);
            }
            
            // 更新员工列表
            if (chatData.staffs && Array.isArray(chatData.staffs)) {
              staffList.value = chatData.staffs;
            }
            
            // 更新备注列表
            if (chatData.remarks && Array.isArray(chatData.remarks)) {
              remarks.value = chatData.remarks.sort((a, b) => 
                new Date(a.create_at).getTime() - new Date(b.create_at).getTime()
              );
            }
            
            // 更新订单信息
            if (chatData.order_no) {
              orderInfo.value = {
                order_no: chatData.order_no,
                name: chatData.crmOrder?.name || '',
                status: chatData.crmOrder?.crmorderstate_name || '',
                remark: chatData.crmOrder?.note || '',
                created_at: chatData.created_at || ''
              };
            }
            
            // 设置 CRM 客户 ID
            crmcustomer_id.value = chatData.crmcustomer_id || null;
            
            // 更新客户信息 - 检查API返回的customer字段
            if (chatData.customer) {
              isNewCustomer.value = false;
              customerData.name = chatData.customer.name || '';
              customerData.company = chatData.customer.company || '';
              customerData.domain = chatData.customer.domain || '';
              customerData.mail = chatData.customer.mail || '';
              customerData.phone = chatData.customer.phone || '';
              customerData.whatsapp = chatData.customer.whatsapp || '';
              customerData.country = chatData.customer.country || '';
              customerData.source = chatData.customer.source || '';
              customerData.tag = chatData.customer.tag || '';
              customerData.address = chatData.customer.address || '';
              customerData.crmcustomercategory_id = chatData.customer.crmcustomercategory_id || null;
            } else {
              isNewCustomer.value = true;
              // 重置客户数据
              Object.assign(customerData, {
                name: '',
                company: '',
                domain: '',
                mail: '',
                phone: '',
                whatsapp: '',
                country: '',
                source: '',
                tag: '',
                address: '',
                crmcustomercategory_id: null
              });
              
              // 从chatId自动提取WhatsApp号码
              if (props.chatId && props.chatId.includes('@c.us')) {
                const phoneNumber = props.chatId.replace('@c.us', '');
                customerData.whatsapp = '+' + phoneNumber;
                customerData.phone = '+' + phoneNumber;
                
                // 自动推断国家
                const inferredCountry = getCountryFromPhone('+' + phoneNumber);
                if (inferredCountry) {
                  customerData.country = inferredCountry;
                }
              }
            }
          }
        }
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    };
    
    // 保存修改
    const handleSave = async () => {
      try {
        // 验证当前聊天ID是否与props.chatId一致
        const currentChatId = getCurrentChatId();
        if (currentChatId !== props.chatId) {
          showToast('聊天窗口已切换，请重新打开对话框');
          console.log('保存时聊天ID不一致，取消保存。props:', props.chatId, '当前:', currentChatId);
          emit('close');
          return;
        }
        
        // 验证表单
        if (!formData.follow_status) {
          showToast('请选择跟进状态');
          return;
        }
        
        // 构建提交数据
        let follow_alert_at = new Date().toISOString().split('T')[0] + ' ' + new Date().toTimeString().slice(0, 8);
        if (formData.need_follow && formData.follow_date && formData.follow_time) {
          follow_alert_at = `${formData.follow_date} ${formData.follow_time}:00`;
        }
        
        // 保存选择的管理员ID
        if (formData.sales_manager_id !== null) {
          await saveLastSelectedManager(formData.sales_manager_id);
        }
        
        // 获取头像
        let avatar = '';
        const elementImage = document.querySelector('#main header img');
        if (elementImage) {
          avatar = elementImage.getAttribute('src') || '';
        } else {
          // 直接在组件内实现获取聊天头像的逻辑
          try {
            // 定位到有属性data-kiki-chat-id=chatId的元素
            const chatItem = document.querySelector(`[data-kiki-chat-id="${props.chatId}"]`);
            if (chatItem) {
              // 获取元素下面img
              const imageElement = chatItem.querySelector('img');
              if (imageElement) {
                // 获取img的src
                avatar = imageElement.getAttribute('src') || '';
              }
            }
          } catch (error) {
            console.error('获取聊天头像失败:', error);
          }
        }
        
        // 获取账号ID
        const account_id = await getStoredAccountID();
        
        // 构建提交数据
        const submitData = {
          _serialized: props.chatId,
          account_serialized: account_id,
          nickname: formData.nickname,
          avatar: avatar,
          order_no: formData.order_no,
          sales_manager_id: formData.sales_manager_id,
          follow_status: formData.follow_status,
          need_follow: formData.need_follow,
          note: formData.note,
          follow_alert_at: follow_alert_at,
          table_name: "WhatsappChat"
        };
        
        // 获取认证信息
        const authInfo = await getAuthInfo();
        if (!authInfo.authorization || !authInfo.ptoken) {
          console.error('缺少认证信息');
          window.open(URL_CONFIG.ERP_BASE_URL + '/#/login', '_blank');
          return;
        }
        
        // 发送请求
        const response = await fetch('https://tools.kikimami.com/crm/api/upwact/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'authorization': authInfo.authorization,
            'ptoken': authInfo.ptoken
          },
          body: JSON.stringify(submitData)
        });
        
        const result = await response.json();
        if (!result.success) {
          throw new Error('保存跟踪信息失败');
        } else {
          console.log('跟踪信息保存成功:', result);
          showToast('保存成功！');
          
          // 如果指定了客户负责人，隐藏警告提示
          if (formData.sales_manager_id !== null) {
            showManagerAlert.value = false;
          }
          
          emit('saved');
          
          // 关闭对话框
          setTimeout(() => {
            emit('close');
          }, 1000);
        }
      } catch (error) {
        console.error('保存跟踪信息时出错:', error);
        showToast('保存失败，请重试');
      }
    };
    
    // 保存备注
    const handleSaveRemark = async () => {
      try {
        // 验证当前聊天ID是否与props.chatId一致
        const currentChatId = getCurrentChatId();
        if (currentChatId !== props.chatId) {
          showToast('聊天窗口已切换，请重新打开对话框');
          console.log('保存备注时聊天ID不一致，取消保存。props:', props.chatId, '当前:', currentChatId);
          emit('close');
          return;
        }
        
        // 验证表单
        if (!remarkForm.content.trim()) {
          showToast('请输入备注内容');
          return;
        }
        
        // 构建提交数据
        const remarkData = {
          content: remarkForm.content.trim(),
          next_follow_up_time: remarkForm.is_alert ? (remarkForm.next_follow_up_time || null) : null,
          crmcustomer_id: crmcustomer_id.value,
          table_name: "CRMRemark",
          is_alert: remarkForm.is_alert
        };
        
        // 获取认证信息
        const authInfo = await getAuthInfo();
        if (!authInfo.authorization || !authInfo.ptoken) {
          console.error('缺少认证信息');
          window.open(URL_CONFIG.ERP_BASE_URL + '/#/login', '_blank');
          return;
        }
        
        // 发送请求
        const response = await fetch('https://tools.kikimami.com/crm/api/crmm/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'authorization': authInfo.authorization,
            'ptoken': authInfo.ptoken
          },
          body: JSON.stringify(remarkData)
        });
        
        if (!response.ok) {
          throw new Error('添加备注失败');
        }
        
        const result = await response.json();
        console.log('备注添加成功：', result);
        showToast('保存成功！');
        
        // 清空表单
        remarkForm.content = '';
        remarkForm.is_alert = false;
        remarkForm.next_follow_up_time = '';
        
        // 重新获取数据
        await initData();
      } catch (error) {
        console.error('添加备注出错:', error);
        showToast('添加备注失败，请重试');
      }
    };
    
    // 保存客户信息
    const handleSaveCustomer = async () => {
      try {
        // 验证当前聊天ID是否与props.chatId一致
        const currentChatId = getCurrentChatId();
        if (currentChatId !== props.chatId) {
          showToast('聊天窗口已切换，请重新打开对话框');
          console.log('保存客户信息时聊天ID不一致，取消保存。props:', props.chatId, '当前:', currentChatId);
          emit('close');
          return;
        }
        
        // 验证表单
        if (!customerData.name.trim()) {
          showToast('请输入客户姓名');
          return;
        }
        
        const submitData = {
          name: customerData.name.trim(),
          company: customerData.company.trim(),
          domain: customerData.domain.trim(),
          mail: customerData.mail.trim(),
          phone: customerData.phone.trim(),
          whatsapp: customerData.whatsapp.trim(),
          country: customerData.country.trim(),
          source: customerData.source.trim(),
          tag: customerData.tag.trim(),
          address: customerData.address.trim(),
          crmcustomercategory_id: customerData.crmcustomercategory_id,
          chat_id: props.chatId // 添加chat_id参数
        };
        
        let result;
        if (isNewCustomer.value) {
          // 创建新客户
          result = await createCustomer(submitData);
          showToast('客户信息创建成功！');
        } else {
          // 更新现有客户
          if (!crmcustomer_id.value) {
            throw new Error('缺少客户ID');
          }
          result = await updateCustomer(crmcustomer_id.value, submitData);
          showToast('客户信息更新成功！');
        }
        
        console.log('客户信息保存成功:', result);
        
        // 重新获取数据
        await initData();
      } catch (error) {
        console.error('保存客户信息出错:', error);
        showToast('保存客户信息失败，请重试');
      }
    };
    
    // 解除客户绑定
    const handleUnbindCustomer = async () => {
      try {
        // 验证当前聊天ID是否与props.chatId一致
        const currentChatId = getCurrentChatId();
        if (currentChatId !== props.chatId) {
          showToast('聊天窗口已切换，请重新打开对话框');
          console.log('解除绑定时聊天ID不一致，取消操作。props:', props.chatId, '当前:', currentChatId);
          emit('close');
          return;
        }
        
        // 确认操作
        if (!confirm('确定要解除当前聊天与客户的绑定关系吗？')) {
          return;
        }
        
        // 调用解除绑定API
        const result = await unbindCustomer(props.chatId);
        console.log('解除绑定成功:', result);
        showToast('客户绑定已解除！');
        
        // 重新获取数据，界面会自动切换到新建模式
        await initData();
      } catch (error) {
        console.error('解除客户绑定出错:', error);
        showToast('解除绑定失败，请重试');
      }
    };
    
    // 拖拽功能
    const startDrag = (event: MouseEvent) => {
      isDragging.value = true;
      const dialog = (event.currentTarget as HTMLElement)?.closest('.modify-info-dialog') as HTMLElement;
      if (!dialog) return;
      
      const rect = dialog.getBoundingClientRect();
      dragOffset.value = {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
      };
      
      // 添加全局事件监听器
      document.addEventListener('mousemove', handleDrag);
      document.addEventListener('mouseup', stopDrag);
      
      // 阻止默认行为
      event.preventDefault();
    };
    
    const handleDrag = (event: MouseEvent) => {
      if (!isDragging.value) return;
      
      const dialog = document.querySelector('.modify-info-dialog') as HTMLElement;
      if (!dialog) return;
      
      const newX = event.clientX - dragOffset.value.x;
      const newY = event.clientY - dragOffset.value.y;
      
      // 限制拖拽范围，确保对话框不会完全拖出视窗
      const maxX = window.innerWidth - dialog.offsetWidth;
      const maxY = window.innerHeight - dialog.offsetHeight;
      
      const constrainedX = Math.max(0, Math.min(newX, maxX));
      const constrainedY = Math.max(0, Math.min(newY, maxY));
      
      dialog.style.position = 'fixed';
      dialog.style.left = `${constrainedX}px`;
      dialog.style.top = `${constrainedY}px`;
      dialog.style.transform = 'none';
    };
    
    const stopDrag = () => {
      isDragging.value = false;
      document.removeEventListener('mousemove', handleDrag);
      document.removeEventListener('mouseup', stopDrag);
    };
    
    // 关闭对话框
    const handleClose = () => {
      // 清理拖拽事件监听器
      stopDrag();
      emit('close');
    };
    
    // 单独加载客户分类列表的函数
    const loadCustomerCategories = async () => {
      try {
        const categoriesData = await getCustomerCategories();
        // 数据结构是 response.data.data
        if (categoriesData && categoriesData.data && categoriesData.data.data && Array.isArray(categoriesData.data.data)) {
          categoryList.value = categoriesData.data.data;
          console.log('客户分类列表加载成功，共', categoryList.value.length, '个分类');
        } else {
          console.warn('客户分类数据格式异常:', categoriesData);
        }
      } catch (error) {
        console.error('获取客户分类列表失败:', error);
      }
    };
    
    // 监听 chatId 变化，重新加载数据
    watch(() => props.chatId, () => {
      if (props.visible && props.chatId) {
        initData();
      }
    });
    
    // 监听 visible 变化，当显示时加载数据
    watch(() => props.visible, (newVal) => {
      if (newVal && props.chatId) {
        initData();
      } else if (!newVal) {
        // 对话框关闭时重置警告状态
        showManagerAlert.value = false;
      }
    });
    
    // 组件挂载时初始化数据
    onMounted(() => {
      // 无论对话框是否显示，都先加载客户分类列表
      loadCustomerCategories();
      
      if (props.visible && props.chatId) {
        initData();
      }
    });
    
    // 组件卸载时清理事件监听器
    onUnmounted(() => {
      stopDrag();
    });
    
    // 复制到剪贴板函数
    const copyToClipboard = (text: string) => {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          showToast('已复制到剪贴板');
        }).catch(() => {
          showToast('复制失败');
        });
      } else {
        // 降级方案
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        try {
          document.execCommand('copy');
          showToast('已复制到剪贴板');
        } catch (error) {
          showToast('复制失败');
        }
        document.body.removeChild(textArea);
      }
    };

    return {
      activeTab,
      showManagerAlert,
      isGroup,
      groupMembers,
      isDragging,
      statusList,
      staffList,
      remarks,
      orderInfo,
      crmcustomer_id,
      isNewCustomer,
      customerData,
      countryList,
      sourceList,
      categoryList,
      formData,
      remarkForm,
      URL_CONFIG,
      handleSave,
      handleSaveRemark,
      handleSaveCustomer,
      handleUnbindCustomer,
      handleWhatsAppChange,
      handleClose,
      copyToClipboard,
      startDrag
    };
  }
});
</script>

<style scoped>
.modify-info-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modify-info-dialog {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s;
}

.modify-info-dialog:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.modify-info-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  user-select: none;
  position: relative;
}

.modify-info-dialog-header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  opacity: 0.6;
}

.modify-info-dialog-header:hover::before {
  opacity: 1;
}

.modify-info-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.manager-alert {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 20px 0 20px;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-icon {
  font-size: 16px;
}

.alert-text {
  color: #856404;
  font-weight: 500;
  font-size: 14px;
}

.tab-navigation {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f9f9f9;
}

.tab-button {
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
}

.tab-button:hover {
  background-color: #f0f0f0;
  color: #333;
}

.tab-button.active {
  color: #00a884;
  border-bottom-color: #00a884;
  background-color: #fff;
  font-weight: 500;
}

.tab-content {
  flex: 1;
  display: flex;
  gap: 20px;
}

.modify-info-dialog-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.modify-info-dialog-left {
  flex: 1;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.modify-info-dialog-right {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kiki-form-item {
  margin-bottom: 16px;
}

.kiki-form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.kiki-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.kiki-input:focus {
  border-color: #00a884;
  outline: none;
}

.datetime-container {
  display: flex;
  gap: 10px;
}

.date-input, .time-input {
  flex: 1;
}

.save-button-container {
  margin-top: 20px;
  text-align: center;
}

.kiki-save-btn {
  padding: 8px 24px;
  background-color: #00a884;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.kiki-save-btn:hover {
  background-color: #008f6f;
}

.kiki-save-btn:active {
  transform: translateY(1px);
}

.kiki-unbind-btn {
  padding: 8px 24px;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 12px;
  transition: background-color 0.3s;
}

.kiki-unbind-btn:hover {
  background-color: #ff3742;
}

.kiki-unbind-btn:active {
  transform: translateY(1px);
}

.kiki-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.kiki-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.kiki-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.kiki-switch label:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.kiki-switch input:checked + label {
  background-color: #00a884;
}

.kiki-switch input:checked + label:before {
  transform: translateX(20px);
}

.order-info {
  margin-bottom: 20px;
}

.order-info-item {
  margin-bottom: 12px;
}

.order-link {
  display: inline-block;
  padding: 8px 16px;
  background: #00a884;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.no-order-info {
  color: #666;
  text-align: center;
  padding: 20px 0;
}

.remarks-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 16px;
}

.remark-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.remark-creator {
  font-size: 14px;
  color: #111b21;
}

.alert-tag {
  color: red;
  margin-left: 5px;
}

.remark-content {
  font-size: 13px;
  color: #555;
  margin: 8px 0;
}

.remark-time, .remark-follow-time {
  font-size: 12px;
  color: #999;
}

.no-remarks {
  color: #666;
  text-align: center;
  padding: 20px 0;
}

.kiki-remark-form {
  padding: 10px;
  border-top: 1px solid #ddd;
  background: #fff;
  margin-top: 8px;
  border-radius: 8px;
}

.kiki-remark-form h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: #333;
}

.save-remark-button-container {
  text-align: right;
}

.kiki-save-remark-btn {
  padding: 8px 16px;
  background: #00a884;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.kiki-save-remark-btn:hover {
  background-color: #008f6f;
}

.customer-form-container {
  flex: 1;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.customer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.customer-form-grid .kiki-form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.customer-form-grid .full-width {
  grid-column: 1 / -1;
}

.field-note {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 4px;
  font-style: italic;
}

.group-members-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.group-members-section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #00a884;
  font-size: 16px;
}

.group-members-list {
  max-height: 200px;
  overflow-y: auto;
}

.group-member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.group-member-item:hover {
  background-color: #f5f5f5;
}

.member-info {
  flex: 1;
}

.member-name {
  font-weight: 500;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.member-serialized {
  font-size: 12px;
  color: #666;
  font-family: monospace;
  word-break: break-all;
}

.copy-btn {
  background: #00a884;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  margin-left: 8px;
}

.copy-btn:hover {
  background: #008f6f;
}

.copy-btn:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .modify-info-dialog-container {
    flex-direction: column;
  }
  
  .modify-info-dialog-left,
  .modify-info-dialog-right {
    width: 100%;
  }
  
  .customer-form-grid {
    grid-template-columns: 1fr;
  }
  
  .tab-content {
    flex-direction: column;
  }
}
</style> 